<template>

  <div>
    <!-- 顶部 -->
    <div class="top">
      <van-row justify="space-between">
        <van-col span="8"><van-icon name="wap-home-o" /></van-col>
        <van-col span="8">网易严选</van-col>
        <van-col span="8">
          <div class="right"> <van-icon name="search" />
            <van-icon name="shopping-cart-o" />
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 中间部分 -->
    <div class="middle">
      <van-icon name="underway-o" />
      网易严选
    </div>
    <!-- 登录表单 -->
    <!-- @submit="onSubmit" -->
    <van-form>
      <van-cell-group inset>
        <!-- v-model="username" -->
        <van-field name="手机号" label="手机号" v-model="phone" placeholder="手机号"
          :rules="[{ required: true, message: '请输入手机号' }]" />
        <!-- v-model="password" -->
        <van-field type="password" name="密码" v-model="password" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请输入密码' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type='danger' @click="getLogin" native-type="submit">
          登录
        </van-button>

      </div>
      <!-- 复选框 -->
      <van-field name="checkbox">
        <template #input>
          <!-- v-model="checked" -->
          <van-checkbox v-model="checked" shape="square" />
          <div class="bottom">
            同意服务条款 和隐形政策和网易严选服务协议
          </div>
        </template>
      </van-field>
    </van-form>
    <router-link to="/register" style="font-size: 12px;">去注册</router-link>
  </div>


</template>

<script lang="ts">
import { defineComponent } from "vue"


export default defineComponent({
  name: 'Login',
})
</script>
<script lang="ts" setup>
import { showToast } from 'vant';
import { useUserInfoStore } from '@/stores/user';
import { ref } from 'vue';
import { useRouter ,useRoute } from 'vue-router'

const checked = ref(false);
const phone = ref('15517943307');
const password = ref('111111')
const userInfoStore = useUserInfoStore()
const router = useRouter()


const route = useRoute()
//点击登录
async function getLogin() {

  const params = { phone: phone.value, password: password.value }
  if (checked.value) {
    //登录
    try {
     await userInfoStore.login(params)
        //跳转到我的页面
      router.push({path:route.query.redirect as string })
    } catch (error) {
      
    }
  } else {
    showToast('您需要同意相关条款才能使用');
  }
}


</script>


<style scoped>

.top {
  padding-bottom: 10px;
  border-bottom: 1px solid grey;
}

.right {
  float: right;
}

.middle {
  text-align: center;
  font-size: 25px;
  font-weight: 600;
  height: 100px;
  line-height: 100px;
}

.bottom {
  font-size: 12px;
  text-align: center;
}



</style>